<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>

<!--动检通菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/prod_left :: nav(1)"/>

    <div class="container-fluid" id="pcont">

        <div class="cl-mcont">

            <!--存栏量-->
            <div class="row dash-cols">

                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="block">
                        <div class="header">
                            <div class="pull-right">
                                <div>趋势(月)</div>
                                <span class="up"> 13,5%</span>
                            </div>
                            <h2><i class="fa fa-road"></i>猪</h2>
                        </div>
                        <div class="content no-padding text-center">

                            <h3>存栏量(头)</h3>
                            <h2 th:text="${cunlanshu['pig']==null?0:cunlanshu['pig']}"
                                style="margin-top: 10px; color: #0000cc;font-size: 30px">6,000,000</h2>


                        </div>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="block">
                        <div class="header">
                            <div class="pull-right">
                                <div>趋势(月)</div>
                                <span class="down"> 13,5%</span>
                            </div>
                            <h2><i class="fa fa-road"></i>牛</h2>
                        </div>
                        <div class="content no-padding text-center">

                            <h3>存栏量（头）</h3>
                            <h2 th:text="${cunlanshu['cow']==null?0:cunlanshu['cow']}"
                                style="margin-top: 10px; color: #0000cc;font-size: 30px">3,000</h2>


                        </div>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="block">
                        <div class="header">
                            <div class="pull-right">
                                <div>趋势(月)</div>
                                <span class="up"> 13,5%</span>
                            </div>
                            <h2><i class="fa fa-road"></i>羊</h2>
                        </div>
                        <div class="content no-padding text-center">

                            <h3>存栏量(只)</h3>
                            <h2 th:text="${cunlanshu['sheep']==null?0:cunlanshu['sheep']}"
                                style="margin-top: 10px; color: #0000cc;font-size: 30px">0</h2>


                        </div>
                    </div>
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <div class="block">
                        <div class="header">
                            <div class="pull-right">
                                <div>趋势(月)</div>
                                <span class="equal"> 0%</span>
                            </div>
                            <h2><i class="fa fa-road"></i>家禽</h2>
                        </div>
                        <div class="content no-padding text-center">

                            <h3>存栏量(羽)</h3>
                            <h2 th:text="${cunlanshu['poultry']==null?0:cunlanshu['poultry']}"
                                style="margin-top: 10px; color: #0000cc;font-size: 30px">6,530,000</h2>


                        </div>
                    </div>
                </div>
            </div>
            <!--存栏量end-->

            <!--近一周变化趋势图-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <h4>近一周变化趋势图</h4>

                        </div>
                        <div class="content">
                            <div id="weekChart" style="width: 1000px;height:300px;"></div>

                        </div>

                    </div>


                </div>
            </div>

            <!--近一周变化趋势图end-->
            <!--按数量变化统计-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <div class="pull-right" style="width:85%">

                                <div class="row show-grid">
                                    <!--  <div class="col-md-3">
                                          <div class="btn-group">
                                              <button type="button" class="btn btn-default">本日</button>
                                              <button type="button" class="btn btn-default">本周</button>
                                              <button type="button" class="btn btn-default">本月</button>
                                          </div>

                                      </div>-->
                                    <div class="col-md-3">
                                        <div class="input-daterange input-group" id="datepicker">
                                            <input type="text" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="start" id="start"
                                                   data-date-format="yyyy-mm-dd">
                                            <span class="input-group-addon">到</span>
                                            <input type="text" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="end" id="end"
                                                   data-date-format="yyyy-mm-dd">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <select class="select2" style="max-width: 100px;" id="city1">
                                            <option value="全部">所有区域</option>
                                            <span th:each="cityAreaDto :${cityAreaDtoList}">
                                                            <optgroup th:label="${cityAreaDto.city}">
                                                                <span th:each="region :${cityAreaDto.regions}">
                                                            <option th:value="${region}"
                                                                    th:text="${region}">南漳县</option>
                                                                    </span>
                                                          </optgroup>
                                                                   </span>
                                        </select>
                                    </div>

                                    <div class="col-md-2">
                                        <select class="form-control" id="breedType1">
                                            <option value="-1">所有畜种</option>

                                            <option value="1">猪</option>
                                            <option value="3">羊</option>
                                            <option value="2">牛</option>
                                            <option value="4">家禽</option>
                                        </select>
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-primary" onclick="t6()">搜索</button>
                                    </div>

                                </div>


                            </div>
                            <br/>
                            <h4>按数量变化统计</h4>

                        </div>
                        <div class="content">
                            <div class="row">

                                <div class="col-md-6 col-sm-6">
                                    <table class="no-border blue">
                                        <thead class="no-border">
                                        <tr>
                                            <th></th>

                                            <th>数量</th>
                                            <th>同比</th>

                                            <th class="text-right">环比</th>
                                        </tr>
                                        </thead>
                                        <tbody class="no-border-x">
                                        <tr>
                                            <td>出生</td>
                                            <td th:text="${a}" id="a">2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        <tr>
                                            <td>调入</td>
                                            <td th:text="${b}" id="b">2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        <tr>
                                            <td>调出</td>
                                            <td th:text="${c}" id="c">2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>
                                        <tr>
                                            <td>死淘</td>
                                            <td th:text="${d}" id="d">2000</td>
                                            <td><i class="fa fa-angle-up"></i>30%</td>

                                            <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div id="amountChart" style="width: 500px;height:200px;"></div>
                                </div>


                            </div>

                        </div>


                    </div>
                </div>

                <!--按数量变化统计end-->

                <!--按地区存栏统计-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="block-flat">
                            <div class="header">
                                <div class="pull-right" style="width:85%">

                                    <div class="row show-grid">
                                        <!--  <div class="col-md-3">
                                              <div class="btn-group">
                                                  <button type="button" class="btn btn-default">本日</button>
                                                  <button type="button" class="btn btn-default">本周</button>
                                                  <button type="button" class="btn btn-default">本月</button>
                                              </div>

                                          </div>-->
                                        <div class="col-md-3">
                                            <div class="input-daterange input-group" id="datepicker"
                                                 style="display: none">
                                                <input type="text" class="input-sm form-control date datetime"
                                                       data-min-view="2" name="start" id="start1"
                                                       data-date-format="yyyy-mm-dd">
                                                <span class="input-group-addon">到</span>
                                                <input type="text" class="input-sm form-control date datetime"
                                                       data-min-view="2" name="end" id="end1"
                                                       data-date-format="yyyy-mm-dd">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <select class="select2" style="max-width: 100px;" id="city2">
                                                <option value="全部">所有区域</option>
                                                <span th:each="cityAreaDto :${cityAreaDtoList}">
                                                            <optgroup th:label="${cityAreaDto.city}">
                                                                <span th:each="region :${cityAreaDto.regions}">
                                                            <option th:value="${region}"
                                                                    th:text="${region}">南漳县</option>
                                                                    </span>
                                                          </optgroup>
                                                                   </span>
                                            </select>
                                        </div>

                                        <!-- <div class="col-md-2">
                                             <select class="form-control" id="breedType2">
                                                 <option value="-1">所有畜种</option>

                                                 <option value="1">猪</option>
                                                 <option value="3">羊</option>
                                                 <option value="2">牛</option>
                                                 <option value="4">家禽</option>
                                             </select>
                                         </div>-->
                                        <div class="col-md-1">
                                            <button type="button" class="btn btn-primary" onclick="t9()">搜索</button>
                                        </div>

                                    </div>


                                </div>
                                <br/>
                                <h4>按地区存栏统计</h4>

                            </div>
                            <div class="content">
                                <div class="row">

                                    <div class="col-md-6 col-sm-6">
                                        <table class="no-border blue">
                                            <thead class="no-border">
                                            <tr>
                                                <th>地区</th>

                                                <th>数量</th>
                                                <th>同比</th>

                                                <th class="text-right">环比</th>
                                            </tr>
                                            </thead>
                                            <tbody class="no-border-x" th:each="map:${Stocks}">
                                            <tr>
                                                <td th:text="${map.city}">金山</td>
                                                <td th:text="${map.Stock}">2000</td>
                                                <td><i class="fa fa-angle-up"></i>30%</td>

                                                <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%
                                                </td>
                                            </tr>
                                            <!--   <tr>
                                                   <td>浦东</td>
                                                   <td>2000</td>
                                                   <td><i class="fa fa-angle-up"></i>30%</td>

                                                   <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%
                                                   </td>
                                               </tr>
                                               <tr>
                                                   <td>杨浦</td>
                                                   <td>2000</td>
                                                   <td><i class="fa fa-angle-up"></i>30%</td>

                                                   <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%
                                                   </td>
                                               </tr>
                                               <tr>
                                                   <td>宝山</td>
                                                   <td>2000</td>
                                                   <td><i class="fa fa-angle-up"></i>30%</td>

                                                   <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%
                                                   </td>
                                               </tr>
                                               -->

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                        <div id="areaChart" style="width: 500px;height:200px;"></div>
                                    </div>


                                </div>

                            </div>


                        </div>
                    </div>

                    <!--按地区存栏统计end-->
                </div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="/webjars/js/jquery.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.bootcss.com/select2/3.4.5/select2.min.js" type="text/javascript"></script>

<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>

<script type="text/javascript"
        src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="//cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        App.init();
    });
</script>
<script type="text/javascript">
    function dateFtt(fmt, date) { //author: meizz
        var o = {
            "M+": date.getMonth() + 1,                 //月份
            "d+": date.getDate(),                    //日
            "h+": date.getHours(),                   //小时
            "m+": date.getMinutes(),                 //分
            "s+": date.getSeconds(),                 //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


    function dare() {
        var array = new Array();

        for (var i = 0; i < 7; i++) {
            var date = new Date();//获取当前时间
            date.setDate(date.getDate() - i);//设置天数 -i天
            array.push(dateFtt("MM/dd", date));
        }
        array.reverse();
        return array;
    }

    function t1() {

        var array = new Array();
        $.ajax({

            url: '/djt/breedarch/amountchert',
            data: {type: 1, limit: 7},
            dataType: 'json',
            async: false,
            success: function (data) {
                for (var i = 0; i < 7; i++) {

                    if (data[i] != null) {
                        array.push(data[i].total);
                    } else {
                        array.push(0);
                    }
                }


            }
        });
        array.reverse();
        return array;

    }


    function t2() {

        var array = new Array();
        $.ajax({

            url: '/djt/breedarch/amountchert',
            data: {type: 2, limit: 7},
            dataType: 'json',
            async: false,
            success: function (data) {
                for (var i = 0; i < 7; i++) {
                    if (data[i] != null) {
                        array.push(data[i].total);
                    } else {
                        array.push(0);
                    }
                }


            }
        });
        array.reverse();
        return array;


    }


    function t3() {

        var array = new Array();
        $.ajax({

            url: '/djt/breedarch/amountchert',
            data: {type: 3, limit: 7},
            dataType: 'json',
            async: false,
            success: function (data) {
                for (var i = 0; i < 7; i++) {
                    if (data[i] != null) {
                        array.push(data[i].total);
                    } else {
                        array.push(0);
                    }
                }


            }
        });
        array.reverse();
        return array;


    }
    function t4() {

        var array = new Array();
        $.ajax({

            url: '/djt/breedarch/amountchert',
            data: {type: 4, limit: 7},
            dataType: 'json',
            async: false,
            success: function (data) {
                for (var i = 0; i < 7; i++) {
                    if (data[i] != null) {
                        array.push(data[i].total);
                    } else {
                        array.push(0);
                    }
                }


            }
        });
        array.reverse();
        return array;


    }

    // ------近一周趋势变化图-----
    var weekChart = echarts.init(document.getElementById('weekChart'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['猪', '牛', '羊', '家禽'],
            selected: {
                '家禽': false
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: dare()
                //['7/17', '7/18', '7/19', '7/20', '7/21', '7/22', '7/23']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '猪',
                type: 'line',

                areaStyle: {normal: {}},
                data: t1()

            },
            {
                name: '牛',
                type: 'line',

                areaStyle: {normal: {}},
                data: t2()

            },
            {
                name: '羊',
                type: 'line',

                areaStyle: {normal: {}},
                data: t3()

            },
            {
                name: '家禽',
                type: 'line',

                areaStyle: {normal: {}},
                data: t4()

            }
        ]
    };
    weekChart.setOption(option);

    //--------------按数量变化---------------------------
    function t5() {

        var array = new Array();
        var array1 = new Array();
        var array2 = new Array();
        var array3 = new Array();
        var array4 = new Array();
        var array5 = new Array();

        $.ajax({

            url: '/djt/breedarch/dashboardchert',
            dataType: 'json',
            async: false,
            success: function (data) {

                for (var i = 0; i < data.length; i++) {

                    array1.push(data[i].city);
                    array2.push(data[i].Stock1);
                    array3.push(data[i].Stock2);
                    array4.push(data[i].Stock3);
                    array5.push(data[i].Stock4);
                }


            }
        });
        array.push(array1);
        array.push(array2);
        array.push(array3);
        array.push(array4);
        array.push(array5);

        return array;

    }

    var t5 = t5();

    function city() {

        var city = $("#city1").val();


        if (city == "全部") {
            var array1 = new Array();
            $("#city1 option").each(function () {  //遍历所有option
                var txt = $(this).val();   //获取option值
                if (txt != '') {
                    array1.push(txt);  //添加到数组中
                }
            });

            return array1.toString();
        } else {
            var array2 = new Array();
            array2.push(city);
            return array2.toString();
        }

    }
    function t6() {
        var time1 = $("#start").val();
        var time2 = $("#end").val();
        if (time1 == "") {
            time1 = new Date("2000-01-01 :00:00:00");
        } else {
            time1 = new Date(time1);
        }

        if (time2 == "") {
            time2 = new Date();
        } else {
            time2 = new Date(time2);
        }
        var breedType = $("#breedType1").val();

        var sdata = {   // 构建查询需要的参数
            area: city(),
            breedType: breedType,
            time1: time1,
            time2: time2
        };
        $.ajax({

            url: '/djt/breedarch/proch',
            dataType: 'json',
            data: sdata,
            success: function (data) {
                var amountChart = echarts.init(document.getElementById('amountChart'));
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['出生', '调入', '调出', '死淘']
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: data['a'], name: '出生'},
                                {value: data['b'], name: '调入'},
                                {value: data['c'], name: '调出'},
                                {value: data['d'], name: '死淘'}
                            ]
                        }
                    ]
                };
                amountChart.setOption(option);


            }
        });


    }
    var amountChart = echarts.init(document.getElementById('amountChart'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['出生', '调入', '调出', '死淘']
        },
        series: [
            {
                name: '数量',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: parseInt($("#a").text()), name: '出生'},
                    {value: parseInt($("#b").text()), name: '调入'},
                    {value: parseInt($("#c").text()), name: '调出'},
                    {value: parseInt($("#d").text()), name: '死淘'}
                ]
            }
        ]
    };
    amountChart.setOption(option);
    //--------------按区域变化---------------------------


    function t9() {
        var time1 = $("#start1").val();
        var time2 = $("#end1").val();
        if (time1 == "") {
            time1 = new Date("2000-01-01 :00:00:00");
        } else {
            time1 = new Date(time1);
        }

        if (time2 == "") {
            time2 = new Date();
        } else {
            time2 = new Date(time2);
        }
        var breedType = $("#breedType2").val();
        var area = $("#city2").val();
        var sdata = {   // 构建查询需要的参数
            area: area,
            breedType: breedType,
            time1: time1,
            time2: time2
        };
        if (area != "全部") {
            $.ajax({

                url: '/djt/breedarch/proch1',
                data: sdata,
                dataType: 'json',
                success: function (data) {
                    var a;
                    var b;
                    var c;
                    var d;

                    if (jQuery.isEmptyObject(data[0])) {
                        a = 0;
                    } else {
                        a = data[0][0].total;
                    }
                    if (jQuery.isEmptyObject(data[1])) {
                        b = 0;
                    } else {
                        b = data[1][0].total;
                    }
                    if (jQuery.isEmptyObject(data[2])) {
                        c = 0;
                    } else {
                        c = data[2][0].total;
                    }
                    if (jQuery.isEmptyObject(data[3])) {
                        d = 0;
                    } else {
                        d = data[3][0].total;
                    }

                    var areaChart = echarts.init(document.getElementById('areaChart'));
                    option = {

                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['猪', '牛', '羊', '家禽'],
                            selected: {
                                '家禽': false
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: [area]
                            //['宝山', '金山', '杨浦', '静安', '浦东']
                        },
                        series: [
                            {
                                name: '猪',
                                type: 'bar',
                                data: [a]
                                // [18203, 23489, 29034, 104970, 131744]
                            },
                            {
                                name: '牛',
                                type: 'bar',
                                data: [b]
                                //[19325, 23438, 31000, 121594, 134141]
                            }
                            ,
                            {
                                name: '羊',
                                type: 'bar',
                                data: [c]//[19325, 23438, 31000, 121594, 134141]
                            }
                            ,
                            {
                                name: '家禽',
                                type: 'bar',
                                data: [d]
                                // [19325, 23438, 31000, 121594, 134141]
                            }
                        ]
                    };
                    areaChart.setOption(option);


                }
            });

        } else {
            var areaChart = echarts.init(document.getElementById('areaChart'));
            option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['猪', '牛', '羊', '家禽'],
                    selected: {
                        '家禽': false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: t5[0]
                    //['宝山', '金山', '杨浦', '静安', '浦东']
                },
                series: [
                    {
                        name: '猪',
                        type: 'bar',
                        data: t5[1]
                        // [18203, 23489, 29034, 104970, 131744]
                    },
                    {
                        name: '牛',
                        type: 'bar',
                        data: t5[3]//[19325, 23438, 31000, 121594, 134141]
                    }
                    ,
                    {
                        name: '羊',
                        type: 'bar',
                        data: t5[2]//[19325, 23438, 31000, 121594, 134141]
                    }
                    ,
                    {
                        name: '家禽',
                        type: 'bar',
                        data: t5[4]
                        // [19325, 23438, 31000, 121594, 134141]
                    }
                ]
            };
            areaChart.setOption(option);

        }

    }
    var areaChart = echarts.init(document.getElementById('areaChart'));
    option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['猪', '牛', '羊', '家禽'],
            selected: {
                '家禽': false
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: t5[0]
            //['宝山', '金山', '杨浦', '静安', '浦东']
        },
        series: [
            {
                name: '猪',
                type: 'bar',
                data: t5[1]
                // [18203, 23489, 29034, 104970, 131744]
            },
            {
                name: '牛',
                type: 'bar',
                data: t5[2]//[19325, 23438, 31000, 121594, 134141]
            }
            ,
            {
                name: '羊',
                type: 'bar',
                data: t5[3]//[19325, 23438, 31000, 121594, 134141]
            }
            ,
            {
                name: '家禽',
                type: 'bar',
                data: t5[4]
                // [19325, 23438, 31000, 121594, 134141]
            }
        ]
    };
    areaChart.setOption(option);


</script>

</body>
</html>
